Maintainable JavaScript — Declarations and Function Calls

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by looking at variables and functions.

Variable Declarations Hoisting

The var statements are hoisted.

This means the declaration can be accessed before it’s defined.

This is because the declaration is pulled up to the top without the value.

We don’t want that to happen automatically since it’ll confuse us.

Fortunately, there’s the let and const variables which are block-scoped and aren’t hoisted.

This is great since we won’t be tricked by where a variable is available in the code.

To make our lives even easier, we should put the variables as the first statements in a function.

A function shouldn’t be too long so we won’t have to jump too far.

For instance, we can write:

function doWork(items) {
  let i;
  const len = items.length;
  let value = 10;
  let result = value + 10;
  for (i = 0; i < len; i++) {
    console.log(items[i]);
  }
}

We used let and const everywhere.

The items are iterated through as with the for loop.

len is declared with const since it never changes.

Doug Crockford also recommended this style.

We also combine all variable declarations with one value per line.

Function Declarations

Function declarations are also hoisted by JavaScript engines like variable declarations.

So we can use a function declaration in our code before it’s declared.

For instance, we can write:

doSomething();

function doSomething() {
  console.log("hello world");
}

We called the doSomething before the function is declared.

This works because of the hoisting.

However, to reduce confusion, it’s better to declare our functions before they’re used.

So we should write:

function doSomething() {
  console.log("hello world");
}

doSomething();

instead.

ESLint and JSHint will warn when a function is used before it’s declared.

Function declarations should never appear inside block statements.

For instance, we shouldn’t write code like:

if (condition) {
  function doSomething() {
    console.log("foo");
  }
} else {
  function doSomething() {
    console.log('bar')
  }
}

This isn’t valid syntax but it’s still run by some browsers.

Therefore, it’s a gray area in the ES specification that should be avoided.

Function declarations should only be used outside of conditional statements.

This is also forbidden in the Google style guide.

Function Call Spacing

Function call spacing is something that isn’t too controversial.

Most people agree that function calls should have no spaces between the function name and the opening parentheses.

This is done to differentiate it from block statements.

For instance, we should write:

doWork(item);

instead of something like:

doWork (item);

This is to differentiate it from block statements like:

while (item) {
  // ...
}

Doug Crockford’s code conventions call this out.

Google’s style guide also recommends this style.

Immediate Function Invocation

JavaScript lets us declare anonymous functions without property names and assign those functions to variables and properties.

We can write:

const doSomething = function() {
  // ...
};

We assigned the anonymous function to a variable, so we can call it with the variable name.

It’s bad to call it without parentheses surrounding the function itself.

For instance, we shouldn’t write:

const value = function() {
  //...
  return {
    message: "hello"
  }
}();

It’s easy to confuse that with defining the function and assigning it to a variable without calling it.

Conclusion

var and function declarations are hoisted.

So they shouldn’t be used.

Also, we shouldn’t use immediate function invocations without parentheses.